<template>
  <div>
    <div>
      <img :src="ResultPIC1" alt />
    </div>
    <div class="result-box">
      <div class="result-top">
        <div>
          <span class="result-title lettle-space">标题：</span>
          <span class="result-msg">{{title}}</span>
        </div>
        <div>
          <span class="result-title">举报时间:</span>
          <span class="result-msg">{{ReportTime}}</span>
        </div>
        <div>
          <span class="result-title">举报方式:</span>
          <span class="result-msg">{{mode}}</span>
        </div>
        <div>
          <span class="result-title">处理状态:</span>
          <span class="result-msg color-blue">{{state}}</span>
        </div>
      </div>
      <div class="result-body">
        <div>
          <h1 class="result-detail">状态详情</h1>
          <span class="result-msg width-100">{{detail}}</span>
        </div>
      </div>
      <div class="result-bt">确定</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ResultPIC1: require("@/assets/image/result-1.png")
    };
  },
  methods: {},
  computed: {
    title: function() {
      // console.log(1)
      // console.log(this.$store.state)
      return this.$store.state.list[0].data[0].processing[0].title;
    },
    ReportTime: function() {
      return this.$store.state.list[0].data[0].processing[0].ReportTime;
    },
    mode: function() {
      return this.$store.state.list[0].data[0].processing[0].mode;
    },
    state: function() {
      return this.$store.state.list[0].data[0].processing[0].state;
    },
    detail: function() {
      return this.$store.state.list[0].data[0].processing[0].detail;
    }
  }
};
</script>
<style lang="less" scoped>
span {
  display: inline-block !important;
}
.result-box {
  margin-top: 49px;
  min-height: 726px;
}
.result-top {
  margin-bottom: 46px;
}
.result-title {
  width: 80px;
  height: 22px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);

  padding: 9px 0;
  margin-right: 19px;
}
.result-msg {
  height: 22px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
  padding: 9px 0;
}
.width-100 {
  width: 100%;
}
.color-blue {
  color: rgba(20, 123, 253, 1);
}
.result-detail {
  width: 72px;
  height: 24px;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  padding: 9px 0;
}
.result-bt {
  width: 172px;
  height: 52px;
  background: rgba(20, 123, 253, 1);
  box-shadow: 0px 4px 12px 0px rgba(20, 123, 253, 0.6);
  border-radius: 5px;
  color: rgba(255, 255, 255, 1);
  font-size: 20px;
  margin: 37px 0 0 0;
  outline: none;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}
.lettle-space::first-letter {
  letter-spacing: 29px; 
}
</style>


